<template>
  <view class="custom-tabbar">
    <view class="tabbar-inner">
      <view 
        v-for="(item, index) in tabList" 
        :key="index"
        :class="['tab-item', { active: current === index }]"
        @click="handleTabClick(item, index)"
      >
        <FaIcon 
          :name="item.icon" 
          :color="current === index ? '#10b981' : '#9ca3af'" 
          :size="item.isCenter ? 64 : 44" 
        />
        <text v-if="!item.isCenter" :class="['tab-text', { active: current === index }]">
          {{ item.text }}
        </text>
        <view v-if="current === index && !item.isCenter" class="active-bar"></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import FaIcon from '@/components/common/FaIcon.vue'

const props = defineProps({
  current: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['change', 'publish'])

const tabList = ref([
  {
    icon: 'home',
    text: '首页',
    pagePath: '/pages/yjyny/home/index',
    isCenter: false
  },
  {
    icon: 'handshake',
    text: '服务',
    pagePath: '/pages/yjyny/service/list',
    isCenter: false
  },
  {
    icon: 'plus',
    text: '',
    pagePath: '',
    isCenter: true
  },
  {
    icon: 'list-alt',
    text: '需求',
    pagePath: '/pages/yjyny/demand/list',
    isCenter: false
  },
  {
    icon: 'user',
    text: '我的',
    pagePath: '/pages/mine',
    isCenter: false
  }
])

const handleTabClick = (item, index) => {
  if (item.isCenter) {
    // 中间的发布按钮
    emit('publish')
  } else if (props.current !== index) {
    // 普通导航 - 只在不是当前页面时导航
    emit('change', index)
    // 使用 reLaunch 替代 switchTab，因为我们使用自定义TabBar
    uni.reLaunch({
      url: item.pagePath
    })
  }
}
</script>

<style lang="scss" scoped>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-top: 2rpx solid #f3f4f6;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.04);
  z-index: 1000;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbar-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 128rpx;
  padding: 0 16rpx;
}

.tab-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 16rpx 0;
  transition: all 0.3s;
  
  &:nth-child(3) {
    // 中间的发布按钮
    width: 112rpx;
    height: 112rpx;
    border-radius: 32rpx;
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.4);
    margin-top: -56rpx;
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.2);
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    &:active::before {
      opacity: 1;
    }
  }
}

.tab-text {
  font-size: 22rpx;
  color: #9ca3af;
  margin-top: 8rpx;
  transition: all 0.3s;
  
  &.active {
    color: #10b981;
    font-weight: 500;
  }
}

.active-bar {
  position: absolute;
  bottom: 0;
  width: 64rpx;
  height: 4rpx;
  background-color: #10b981;
  border-radius: 2rpx;
}
</style>

